<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-网络</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="card">
    <div class="card-body">
        <!--顶部条-->
        <div style="padding: 0 7px 15px 7px" class="clearfix">
            <!--搜索输入框组-->
            <div class="input-group pull-left" style="width: 50%">
                <input id="keyword" class="form-control" type="search" placeholder="名称">
                <div class="input-group-append">
                    <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
                </div>
            </div>
            <!--新增按钮-->
            <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 添加网络</button>
        </div>
        <!--数据展示-->
        <div class="container-fluid">
            <table id="table" class="table table-sm table-hover table-bordered">
                <thead><tr>
                    <th>#</th>
                    <th>名称</th>
                    <th>驱动</th>
                    <th>子网</th>
                    <th>网关</th>
                    <th>创建时间</th>
                    <th style="width: 4em">操作</th>
                </tr></thead>
                <tbody><tr>
                    <td>{{index}}</td>
                    <td>{{name}}</td>
                    <td><span class="badge {{driverClass}}">{{driverName}}</span></td>
                    <td>{{subnet}}</td>
                    <td>{{gateway}}</td>
                    <td>{{created}}</td>
                    <td>
                        <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}" data-diabled="{{deleteDiabled}}">
                            <i class="fa fa-times"></i> 删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--加载更多-->
        <div id="load-more" class="text-sm-center text-primary" style="display: none;">
            <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
        </div>
        <!--正在加载-->
        <div id="loading" class="text-sm-center text-gray" style="display: none;">
            <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
        </div>
        <!--全部加载-->
        <div id="load-all" class="text-sm-center text-success" style="display: none;">
            <i class="fa fa-info-circle"></i> 已加载全部数据
        </div>
        <!--加载失败-->
        <div id="load-error" class="text-sm-center text-danger" style="display: none;">
            <i class="fa fa-exclamation-triangle"></i> 加载失败
        </div>
    </div>
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="id" name="id">
        <div class="form-group">
            <label for="name" class="require">名称</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请填写名称" required>
        </div>
        <div class="form-group">
            <label for="driver" class="require">驱动</label>
            <select class="form-control" id="driver" name="driver" disabled required>
                <option value="bridge" selected>桥接网络</option>
            </select>
        </div>
        <div class="form-group">
            <label for="subnet">子网</label>
            <input type="text" class="form-control" id="subnet" name="subnet" placeholder="192.168.0.0/24">
        </div>
        <div class="form-group">
            <label for="gateway">网关</label>
            <input type="text" class="form-control" id="gateway" name="gateway" placeholder="192.168.0.0">
        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var serverId = undefined;

    var tableCtrl = new TableCtrl(
        Url.dockerService.dockerNetworkPage,
        Url.dockerService.dockerNetworkDetail,
        Url.dockerService.dockerNetworkCreate,
        undefined,
        Url.dockerService.dockerNetworkRemove,
        function (template, record, index) {
            var driverClass = "bg-gray";
            var driverName = "未知网络";
            switch (record.driver) {
                case "bridge": driverClass = "bg-success"; driverName = "桥接网络"; break;
                case "host": driverClass = "bg-info"; driverName = "主机网络"; break;
                case "null": driverClass = "bg-secondary"; driverName = "本地网络"; break;
                default: driverClass = "bg-gray"; driverName = "未知网络"; break;
            }
            var deleteDiabled = "false";
            if (record.name === "bridge" || record.name === "host" || record.name === "none") {
                deleteDiabled = "true"
            }

            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{driverClass}}", "gm"), driverClass)
                .replace(new RegExp("{{driverName}}", "gm"), driverName)
                .replace(new RegExp("{{subnet}}", "gm"), record.subnet ? record.subnet : "")
                .replace(new RegExp("{{gateway}}", "gm"), record.gateway ? record.gateway : "")
                .replace(new RegExp("{{created}}", "gm"), record.created)
                .replace(new RegExp("{{deleteDiabled}}", "gm"), deleteDiabled)
        },
        function () {
            var record = {};
            record.id = $("#id").val();
            record.name = $("#name").val();
            record.driver = $("#driver").val();
            record.subnet = $("#subnet").val();
            record.gateway = $("#gateway").val();
            return record;
        }
    );
    tableCtrl.pageSize = 100000000;
    tableCtrl.extraSetRecord = function () {
        $("#table button.remove[data-diabled=true]").attr("disabled", "disabled");
    }
    tableCtrl.extraUrlSearch = function(url) {
        return url + "&serverId=" + serverId
    };
    tableCtrl.extraUrlCreate = function(url) {
        return url + "?serverId=" + serverId
    };
    tableCtrl.extraUrlRemove = function(url, id) {
        return url + "?serverId=" + serverId
    };

    tableCtrl.getTemplate();
    tableCtrl.bindEvent();

    var onWebSocketEvent = function (event) {
        if (event.type === "DOCKER_NETWORK_REFRESH") {
            tableCtrl.pageNumber = 0;
            tableCtrl.records = [];
            tableCtrl.getRecords();
        }
    };
    onWebSocketEvent.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(onWebSocketEvent);

    var onWindowActive = function () {
        parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name", serverId);
    }
    onWindowActive.owner = window.location.href;
    parent.window.frameCtrl.windowCtrl.tabChangeListers.push(onWindowActive);

    var onTitleSelectChange = function (value) {
        serverId = value;
        tableCtrl.pageNumber = 0;
        tableCtrl.records = [];
        tableCtrl.getRecords();
    }
    onTitleSelectChange.owner = window.location.href;
    parent.window.frameCtrl.titleSelectCtrl.listeners.push(onTitleSelectChange);

    parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name");
</script>

</body>
</html>